@highlight-ui/utils-commons

@highlight-ui/utils-commons

Installation

yarn add @highlight-ui/utils-commons

Usage

import utils from '@highlight-ui/utils-commons';

Exported Objects

Name	Description
ICON_MAP	A map for associating validation states with icons
THEME_COLOR_TOKEN_MAP	A map for associating themes with color tokens

Exported Types

Name	Description
FontFamily	Valid FontAwesome family variants
Locale	Used for internationalization
Size	Allowed size variants
Theme	Allowed themes
ColorToken	Allowed color tokens
Direction	Used for positioning elements
ComponentMetadata	Used for specifying required data-attributes for e2e tests
ParsedMetadata	Same as ComponentMetadata but every attribute is prefixed with data-*
PropsWithMetadata	Utility type for adding metadata to a component's props
OutlineVariant	Allowed outlines on input elements
ValidationStatus	Used for specifying validations status for a message or a file

Exported Functions

parseMetadata()

Takes an object and converts all of its properties to valid HTML data attributes.

import utils from '@highlight-ui/utils-commons';

const metadata = {
  firstAttribute: '1',
  secondAttribute: '2',
};

const parsedMetadata = utils.parseMetadata(metadata);

console.log(parsedMetadata);
/*
  Output:
 {
  'data-first-attribute': '1',
  'data-second-attribute': '2',
  }
*/

forkHandlers()

Receives an array of callbacks and returns a function that accepts an event argument that will be passed to every callback in the array.

import utils from '@highlight-ui/utils-commons';

const MyComponent = () => {
  const handleClick = utils.forkHandlers([
    () => {
      console.log('first handler');
    },
    () => {
      console.log('second handler');
    },
    (event) => {
      event.preventDefault();
      console.log('third handler');
    },
  ]);

  return <div onClick={handleClick}>Click Me</div>;
};